<template>
  <div class="home">
      <h1>用户中心</h1>
      <!-- 组件内的router-view称为子路由视图 -->
      <!-- 渲染出 当前路由下匹配的子路由的选项 -->
      <div class="box">

        <div>
          <div>我是1号routerview</div>
          <router-view name="a1" />
        </div>
        <div>
            <div>我是默认的路由视图</div>
            <!-- router-view name属性的默认值是default -->
          <router-view />
        </div>
        <div> 
          <div>我是2号routerview</div>
          <router-view name="a2" />
        </div>

      </div>
      
  </div>
</template>

<script setup>




</script>

<style lang="scss">
.box{
  display: flex;
  &>div{
    width: 0;
    flex-grow: 1;
    border: 1px solid red;
  }
}
</style>
